<template>
  <div class="header-search" @click="enterSearchMode">
    <a-icon type="search" class="search-icon" />
    <a-auto-complete
      ref="input"
      :class="['search-input', searchMode ? 'enter' : 'leave']"
      placeholder="站内搜索"
      v-model="searchText"
      @blur="leaveSearchMode"
      @search="onSearch"
      @select="onSelect"
    >
      <template slot="dataSource">
        <a-select-option v-for="r in dataSource" :key="r.path" :disabled="r.hasChildren">
          {{ r.title.join('-') }}
        </a-select-option>
      </template>
    </a-auto-complete>
  </div>
</template>

<script>
import path from 'path'

export default {
  name: 'HeaderSearch',
  data() {
    return {
      searchText: '',
      dataSource: [],
      searchMode: false
    }
  },
  computed: {
    routes() {
      return this.generateRoutes(this.$store.getters.menuData)
    }
  },
  methods: {
    enterSearchMode() {
      this.searchMode = true
      this.$emit('active', true)
      setTimeout(() => this.$refs.input.focus(), 300)
    },
    leaveSearchMode() {
      this.searchText = ''
      this.dataSource = []
      this.searchMode = false
      setTimeout(() => this.$emit('active', false), 300)
    },
    onSearch(searchText) {
      this.dataSource = !searchText ? [] : this.routes.filter((r) => r.title.find((t) => t.indexOf(searchText) > -1))
    },
    onSelect(path) {
      this.leaveSearchMode()
      this.$router.push(path)
    },
    // Filter out the routes that can be displayed in the sidebar
    // And generate the internationalized title
    generateRoutes(routes, basePath = '/', prefixTitle = []) {
      let res = []

      for (const router of routes) {
        // skip hidden router
        if (router.hidden) {
          continue
        }

        const data = {
          path: path.resolve(basePath, router.path),
          title: [...prefixTitle],
          hasChildren: router.children && router.children.length > 0
        }

        if (router.meta && router.meta.title) {
          data.title = [...data.title, router.meta.title]

          if (router.redirect !== 'noRedirect') {
            // only push the routes with title
            // special case: need to exclude parent router without redirect
            res.push(data)
          }
        }

        // recursive child routes
        if (router.children) {
          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
          if (tempRoutes.length >= 1) {
            res = [...res, ...tempRoutes]
          }
        }
      }
      return res
    }
  }
}
</script>

<style lang="less">
.header-search {
  .search-icon {
    font-size: 16px;
    cursor: pointer;
  }
  .search-input {
    border: 0;
    border-bottom: 1px solid @border-color-split;
    transition: width 0.3s ease-in-out;
    input {
      border: 0;
      box-shadow: 0 0 0 0;
    }
    &.leave {
      width: 0px;
      input {
        display: none;
      }
    }
    &.enter {
      width: 200px;
      input:focus {
        box-shadow: 0 0 0 0;
      }
    }
  }
}
</style>
